<template>
    <div class="editor-components">
        <div style="border: 1px solid #ccc;height: 100%;">
            <Toolbar ref="toolBarRef" style="border-bottom: 1px solid #ccc" :editor="editorRef"
                :defaultConfig="toolbarConfig" :mode="mode" />
            <Editor :style="{ 'overflow-y': 'hidden', 'height': height }" v-model="valueHtml" :defaultConfig="editorConfig"
                :mode="mode" @onCreated="handleCreated" />
            <!-- @customPaste="customPaste" -->
        </div>
    </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { defineComponent, onBeforeUnmount, ref, shallowRef, onMounted, reactive, nextTick, onBeforeMount } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage } from 'element-plus'
import { uploadFile } from '../../api/index'
export default defineComponent({
    components: {
        Editor, Toolbar
    },
    props: {
        height: {
            type: String,
            default: '500px'
        },
        //字数限制
        strict: {
            type: Boolean,
            default: false
        },
        maxLength: {
            type: Number,
            default: 500
        },
        autoFocus: {
            type: Boolean,
            default: false
        },
        readOnly: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: '请输入内容...'
        }
    },
    emits: [
        'getHtml'
    ],
    setup(props, context) {
        const { strict, maxLength, autoFocus, readOnly, placeholder } = props;

        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()
        //工具栏实例
        const toolBarRef = ref();
        const mode = ref('default') // 或 'simple'
        // 内容 HTML
        const valueHtml = ref('')

        //基本配置项
        const toolConfig = ['bold', 'underline', 'italic', 'through', 'code', 'sub', 'sup', 'clearStyle', 'color',
            'bgColor', 'fontSize', 'fontFamily', 'indent', 'delIndent', 'justifyLeft', 'justifyRight',
            'justifyCenter', 'justifyJustify', 'lineHeight', 'insertImage', 'deleteImage', 'editImage', 'viewImageLink',
            'imageWidth30', 'imageWidth50', 'imageWidth100', 'divider', 'emotion', 'insertLink', 'editLink', 'unLink',
            'viewLink', 'codeBlock', 'blockquote', 'headerSelect', 'header1', 'header2', 'header3', 'header4', 'header5',
            'todo', 'redo', 'undo', 'fullScreen', 'enter', 'bulletedList', 'numberedList', 'insertTable', 'deleteTable',
            'insertTableRow', 'deleteTableRow', 'insertTableCol', 'deleteTableCol', 'tableHeader', 'tableFullWidth',
            'insertVideo', 'uploadVideo', 'editVideoSize', 'uploadImage', 'codeSelectLang']
        //工具栏配置
        const toolbarConfig = reactive({
            toolbarKeys: [
                'clearStyle',
                'bold',
                'color',
                'bgColor',
                'fontSize',
                'fontFamily',
                'indent',
                'delIndent',
                'justifyLeft',
                'justifyRight',
                'justifyCenter',
                'justifyJustify',
                'lineHeight',
                'underline',
                'through',
                'code',
                'sub',
                'sup',
                'divider',
                'emotion',
                'blockquote',
                'headerSelect',
                // {
                //     key: 'group-more-style', // 必填，要以 group 开头
                //     title: '更多样式', // 必填
                //     iconSvg: '', // 可选
                //     menuKeys: ['through', 'code', 'sub', 'sup'] // 下级菜单 key ，必填
                // },
                '|',
                // 菜单组，包含多个菜单
                {
                    key: 'group-image', // 必填，要以 group 开头
                    title: '图片', // 必填
                    iconSvg: '',
                    menuKeys: [
                        'uploadImage',
                        'insertImage',
                        'deleteImage',
                        'editImage',
                        'viewImageLink'
                    ]
                },
                // {
                //     key: 'group-video',
                //     title: '视频',
                //     iconSvg: '',
                //     menuKeys: ['insertVideo',
                //         'uploadVideo']
                // },
                {
                    key: 'group-link',
                    title: '链接',
                    menuKeys: ['insertLink', 'editLink', 'unLink', 'viewLink']
                },
                // {
                //     key: 'group-table',
                //     title: '表格',
                //     menuKeys: ['insertTable',
                //         'deleteTable',
                //         'insertTableRow',
                //         'deleteTableRow',
                //         'insertTableCol',
                //         'deleteTableCol',
                //         'tableHeader',
                //         'tableFullWidth']
                // },
                // 菜单组，包含多个菜单

                'redo',
                'undo',
                'fullScreen'
            ]
        })
        //编辑器配置
        const editorConfig = reactive({
            placeholder,
            autoFocus,
            // 只读状态可通过 editor.enable() 和 editor.disable() 切换
            readOnly,
            scroll: true,
            //配置工具栏toolbarKeys菜单项
            MENU_CONF: {
                // colors: ['#000', '#333', '#666']，
                // 'fontSize': {
                //     fontSizeList: [
                //         // 元素支持两种形式
                //         //   1. 字符串；
                //         //   2. { name: 'xxx', value: 'xxx' }
                //         '12px',
                //         '16px',
                //         { name: '24px', value: '24px' },
                //         '40px',
                //     ]
                // },
                // fontFamily: {
                //     fontFamilyList: [
                //         // 元素支持两种形式
                //         //   1. 字符串；
                //         //   2. { name: 'xxx', value: 'xxx' }

                //         '黑体',
                //         '楷体',
                //         { name: '仿宋', value: '仿宋' },
                //         'Arial',
                //         'Tahoma',
                //         'Verdana'
                //     ]
                // },
                //上传本地图片
                uploadImage: {
                    // server: `${import.meta.env.VITE_BASE_API}/file`, //还是相当于本地调用
                    // // form-data fieldName ，默认值 'wangeditor-uploaded-image'
                    // fieldName: 'file',

                    // // 单个文件的最大体积限制，默认为 2M
                    // maxFileSize: 10 * 1024 * 1024, // 10M

                    // // 最多可上传几个文件，默认为 100
                    maxNumberOfFiles: 1,

                    // // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                    // allowedFileTypes: ['image/*'],

                    // // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                    // meta: {
                    //     // 'x-auth-token': localStorage.getItem('token'),
                    // },

                    // // 将 meta 拼接到 url 参数中，默认 false
                    // // metaWithUrl: false,

                    // // 自定义增加 http  header
                    // headers: {
                    //     // Accept: 'text/x-json',
                    //     'x-auth-token': localStorage.getItem('token'),
                    // },

                    // // 跨域是否传递 cookie ，默认为 false
                    // withCredentials: true,

                    // // 超时时间，默认为 10 秒
                    // timeout: 10 * 1000,
                    // // 上传之前触发
                    // onBeforeUpload(file) {
                    //     let flag = false;
                    //     Object.keys(file).forEach(item => {
                    //         if (!file[item].type.startsWith('image/')) {
                    //             ElMessage.error('请上传图片类型的文件！')
                    //             flag = true;
                    //             return;
                    //         }
                    //     })
                    //     if (flag) {
                    //         return false;
                    //     }
                    //     // file 选中的文件，格式如 { key: file }
                    //     return file;
                    //     // 可以 return
                    //     // 1. return file 或者 new 一个 file ，接下来将上传
                    //     // 2. return false ，不上传这个 file
                    // },

                    // // 上传进度的回调函数
                    // onProgress(progress) {
                    //     // progress 是 0-100 的数字
                    //     // console.log('progress', progress)
                    // },

                    // // 单个文件上传成功之后
                    // onSuccess(file, res) {
                    //     ElMessage.success(`${file.name} 上传成功`, res)
                    // },

                    // // 单个文件上传失败
                    // onFailed(file, res) {
                    //     ElMessage.error(`${file.name} 上传失败`)
                    // },

                    // // 上传错误，或者触发 timeout 超时
                    // onError(file, err, res) {
                    //     ElMessage.error(`${file.name} 上传出错,${err}`)
                    // },
                    //     图片上传成功响应体
                    // {
                    //     "errno": 0, // 注意：值是数字，不能是字符串
                    //     "data": {
                    //         "url": "xxx", // 图片 src ，必须
                    //         "alt": "yyy", // 图片描述文字，非必须
                    //         "href": "zzz" // 图片的链接，非必须
                    //     }
                    // }

                    // 图片上传失败响应体

                    // {
                    // "errno": 1, // 只要不等于 0 就行
                    // "message": "失败信息"
                    // }


                    //自定义上传insertFn(url,ait.href)
                    async customUpload(file, insertFn) {
                        if (!file.type.includes("image")) {
                            ElMessage.error('请上传图片类型的文件！')
                            return;
                        }
                        if (file.size / 1024 / 1024 > 5) {
                            ElMessage.error("请上传5M以内的图片！");
                            return;
                        }
                        const formData = new FormData();
                        formData.append("file", file);
                        let res = await uploadFile(formData);
                        if (res.code === 200) {
                            insertFn(`${import.meta.env.VITE_BASE_IMAGE_URL}${res.data}`, file.name);
                        }
                    },

                },
            },

            // 鼠标弄到文本上的hover提示
            // hoverbarKeys: {
            //     'link': {
            //         // 重写 link 元素的 hoverbar
            //         menuKeys: ['editLink', 'unLink', 'viewLink'],
            //     },
            //     'image': {
            //         // 清空 image 元素的 hoverbar
            //         menuKeys: [],
            //     }
            // }
        })
        const getText = () => {
            return editorRef.value.getText()
        }
        const setHtml = (value) => {
            editorRef.value.setHtml(value)
        }
        const getHtml = () => {
            return editorRef.value.getHtml()
        }
        const isEmpty = () => {
            return editorRef.value.isEmpty()
        }
        const handleCreated = (editor) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }
        const handleChange = (value) => {
            // console.log(value)
            // context.emit('htmlChange', value)
        }
        const handleBlur = (value) => {
            // console.log(value)
            // context.emit('htmlChange', value)
        }
        // const customPaste = (editor, e) => {
        //     console.log(e.clipboardData.getData('text/html'))
        //     return true;
        // }


        onBeforeMount(() => {
            if (strict) {
                editorConfig.maxLength = maxLength;
            }
        })
        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            if (editorRef.value === null) return
            editorRef.value.destroy()
        })
        return {
            editorRef,
            valueHtml,
            toolBarRef,
            mode,
            toolbarConfig,
            editorConfig,
            getText,
            setHtml,
            getHtml,
            isEmpty,
            handleCreated,
            handleChange,
            handleBlur,
            // customPaste
        }
    }
})
</script>
<style scoped>
.editor-components {
    width: 100%;
}
</style>
  